<template>
  <div class="section section-base page_9">
    <div class="page_9_words_title">隐患关键词</div>
    <div class="page_9_words">
      <!-- <img src="/ilink-app-h5-zd/static/img/ilink_1577975087857.png" alt="">
					<img src="/ilink-app-h5-zd/static/img/ilink_1577975105796.png" alt="">
      <img src="/ilink-app-h5-zd/static/img/ilink_1577975120122.png" alt="">-->
      <div ref="chartDom" style="width:100%;height:200px"></div>
    </div>
    <div class="font30">
      <div class="flex-start">
        <count-to class="aaa" :startVal="0" :endVal="dataCount" :duration="3000"></count-to>
        <div>个</div>
      </div>
      <div
        id="page_9_des"
        class="font16"
        style="font-weight: normal;"
      >全年共消灭了{{detailData.total}}个隐患，平均每{{detailData.avgTime}}小时处理一个隐患。</div>
    </div>
    <animation-text :text="animationText"></animation-text>
  </div>
</template>

<script>
require('echarts-wordcloud')
export default {
  components: {},
  props: {
    reportData: {
      type: Object,
      default: function () {
        return {
          joinTime: {},
        }
      },
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dataCount: 0,
      detailData: {
        total: 0,
        avgTime: 0,
      },
      animationText: '',
    }
  },
  watch: {
    active(val) {
      if (val) {
        this.$nextTick(() => {
          this.init()
        })
      }
    },
  },
  methods: {
    init() {
      let data = this.reportData
      this.dataCount = data.hiddenDanger.total
      this.detailData = data.hiddenDanger

      if (data.hiddenDanger.word) {
        this.animationText = `比${data.hiddenDanger.percent}%的单位都要更快！`

        let wordsData = data.hiddenDanger.word.split(',')
        let wordsDataConcat = wordsData.map((item) => {
          return { name: item, value: this.getRandomNumberByRange(1, 10) }
        })
        this.getWorld(wordsDataConcat)
      }
    },
    getWorld(wordsDataConcat) {
      let myChart2 = echarts.init(this.$refs.chartDom)
      let colorArr = [
        '#ffffff',
        '#fff8f8',
        '#fef1f1',
        '#feeae9',
        '#fee3e2',
        '#fddbdb',
        '#fdd4d4',
        '#fccdcc',
        '#fcc6c5',
        '#fcbfbe',
        '#fbb8b7',
        '#fbb1af',
        '#fbaaa8',
        '#faa2a1',
        '#fa9b9a',
        '#fa9492',
        '#f98d8b',
        '#f98684',
        '#f97f7d',
        '#f87875',
      ]
      let option = {
        tooltip: {
          show: false,
          //formatter: function(params) {
          //     let html = `<p><span style="display:inline-block;width:5px;
          //         height:5px;border-radius:50%;background-color:${params.color};margin-right:5px;vertical-align:middle"></span>${params.name}:共出现${params.value}次</p>`;
          //     return html;
          //   }
        },
        series: [
          {
            type: 'wordCloud',
            gridSize: 2,
            sizeRange: [12, 50],
            rotationRange: [-90, 90],
            shape: 'pentagon',
            textStyle: {
              normal: {
                color: function () {
                  return colorArr[Math.floor(Math.random() * colorArr.length)]
                },
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#333',
              },
            },
            data: wordsDataConcat,
          },
        ],
      }
      myChart2.setOption(option)
    },
    getRandomNumberByRange(start, end) {
      return Math.floor(Math.random() * (end - start) + start)
    },
  },
  mounted() {},
}
</script>